import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

// tslint:disable
export interface channel {
  id: number;
  imgUrl: string;
  title: string;
  link: string;
}
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss'],
  changeDetection:ChangeDetectionStrategy.OnPush
})

export class MyComponentComponent {
  @Input() cols = 8;
  @Input() displayCols = 5;
  sliderMargin = '5';

  constructor() { }

  public get scrollable(): boolean {
    return this.cols > this.displayCols;
  }
  public get templateRows(): string {

    return `minmax(auto,max-content)`;

  }
  public get templateColumns(): string {

    return `repeat(
      ${this.cols}, calc((100vw - ${this.displayCols * 0.4}rem)/${this.displayCols})
      )`;

  }
  handleScroll(ev: any) {
    this.sliderMargin = `0 ${100 * ev.target.scrollLeft / ev.target.scrollWidth}%`
  }
}
